<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*
           :first-child
            设置ul中的第一个li元素设置字体为红色
            该伪类是根据所有的子元素进行排序的
            所以当第一个子元素部署li类型的，则不会生效
            */
        ul > li:first-child {
            color: red;
        }
        ul > span:first-child {
            color: red;
            font-weight: bold;
        }
        /*
        :first-of-type
            该伪类是在同类型元素中进行排序
        */
        ul > li:first-of-type {
            font-family: 华文楷体;
        }
        ul > li:last-child {
            color: blue;
        }
        /*:nth-child(n) 选中第n个子元素
            特殊值：
                n 表示选中所有
                2n 或 even 表示选中偶数位的元素
                2n+1 或 odd 表示选中奇数位的元素
        */
        /*ul > li:nth-child(3n) {*/
        /*    color: yellow;*/
        /*}*/

        /*
        :not 否定伪类
        */
        ul > li:not(:nth-of-type(2n)) {
            color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
        <li>第六个</li>
        <li>第七个</li>
        <li>第八个</li>
    </ul>
</body>
</html>